import {TextIcon} from '../components'
import {compose, QueryComponent,concat} from '../util'
import {withData} from '../hoc'
import ALL_CITIES from '../graphql/AllCities.graphql'
import {AllCitiesQuery} from '../flow-typed/graphql-types.flow'
import {withState} from 'recompose'


const LocationSelect = ({state: {hover, parent, root}, callback, state, setState, label}) => (
    <div className='address-select'
         onMouseOver={() => !hover && setState({...state, hover: true})}
         onMouseLeave={() => setState({...state, hover: false})}
    >
        <TextIcon icon='dizhi1' hover='#35c0c1' label={label} marginRight='1rem' fontSize='.875rem'/>
        {
            hover &&
            <div className='city'>
                <QueryComponent gql={ALL_CITIES}
                                options={{
                                    variables: {
                                        filter: {
                                            OR: [
                                                {parentId: null},
                                                {parentId: undefined}
                                            ]
                                        }
                                    }
                                }}
                                render={(props: AllCitiesQuery) => (
                                    <ul>
                                        <li key='addressId' onClick={() => callback({addressId: true})}>不限</li>
                                        {(props.allCities || []).map(city => (
                                                <li key={city.id} onClick={() => {
                                                    if (city.id != root.id) {
                                                        setState({
                                                            ...state,
                                                            root: city
                                                        })
                                                    }
                                                }}>
                                                    {city.name}
                                                </li>
                                            )
                                        )}
                                    </ul>
                                )}
                />
                {root.id &&
                <Box bgColor='#f7fbfb'>
                    <QueryComponent gql={ALL_CITIES}
                                    options={{
                                        variables: {
                                            skip: !root.id,
                                            filter: {parentId: root.id}
                                        }
                                    }}
                                    render={(props: AllCitiesQuery) => (
                                        <ul>
                                            {(props.allCities || []).map(city => (
                                                    <li key={city.id}
                                                        onClick={() => {
                                                            if (city.id != parent.id && !city.leaf) {
                                                                setState({
                                                                    ...state,
                                                                    parent: city
                                                                })
                                                            } else {
                                                                callback([root, city]);
                                                                setState({
                                                                    hover: false,
                                                                    parent: {},
                                                                    root: {}
                                                                })
                                                            }
                                                        }}>
                                                        {city.name}
                                                    </li>
                                                )
                                            )}
                                        </ul>
                                    )}
                    />
                </Box>
                }
                {parent.id &&
                <Box bgColor='#fff'>
                    <QueryComponent gql={ALL_CITIES}
                                    options={{
                                        variables: {
                                            skip: !parent.id,
                                            filter: {parentId: parent.id}
                                        }
                                    }}
                                    render={(props: AllCitiesQuery) => (
                                        <ul>
                                            {(props.allCities || []).map(city => (
                                                <li key={city.id} onClick={() => {
                                                    callback([root, parent, city],{address:false});
                                                    setState({
                                                        hover: false,
                                                        parent: {},
                                                        root: {}
                                                    })
                                                }}>
                                                    {city.name}
                                                </li>
                                            ))}
                                        </ul>
                                    )}
                    />
                </Box>
                }
            </div>
        }


        <style jsx>{`
            .address-select{
                line-height:44px;
                height:44px;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
            }

            .city{
                display: flex;
                justify-content: flex-start;
                position: absolute;
                top: 45px;
                left: 0;
                background:#fff;
                z-index:1;
                width: auto;
                color: #9fa3b0;
                box-shadow: 0 2px 8px rgba(0,0,0,.1);

                .hot-city{
                    background: #f2f9f9;
                }

                ul{
                    padding:0;
                    margin:0;

                    li{
                        padding-left: 28px;
                        line-height: 50px;
                        cursor: pointer;
                        list-style: none;

                        &:hover{
                            background: #eaf5f5;
                        }
                    }
                }

                >ul{
                    width: 150px;
                    float: left;
                    height: 302px;
                    overflow: auto;
                    backgorund:#fff;
                }

                >div{
                    width:150px;
                    height: 302px;
                    overflow: auto;
                }
            }
        `}</style>
    </div>
);

export default compose(
    withData,
    withState('state', 'setState', {
        hover: false,
        parent: {},
        root: {},
    })
)(LocationSelect)